<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图像对齐】</title>
	    <!-- 垂直方法对象属性  vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					    【文本和图片垂直居中（对齐）效果】
						对齐分为四种：基线对齐、顶端对齐
						             居中对齐、底部对齐
						元素种类：块元素、行元素、行内块元素
						块元素(div、p、h1)特点：独占一行、设置宽高
						行元素(span、a)特点：一行内显示、不可设置宽高
						网页：元素之间嵌套生成
						行元素与块元素之间可以任意嵌套
						前提：设置宽高---行套块
									 ---块套块   √
									 ---块套行   √
						前提：一行内显示---行套块  √
									  ---块套块   ×
									  ---块套行  √
									  ---行套行   √		   
		-->
		<style>
			p im g:nth-child(1){
				/* vertical-align: baseline  默认基线对齐 */
				vertical-align: baseline;
			}	
			/* 问题：派生选择器，特点：找后代  p  img */
			p im g:nth-child(2){
			    /* vertical-align: baseline  顶端对齐 */
				vertical-align: top;
				width: 500px;
				height: 500px;
				background: #ffaaff;
			}	
			img.baseline{
				vertical-align:baseline;
			}
			img.top{
				vertical-align: top;
			}
			img.middle{
				vertical-align: middle;
			}
			img.bottom{
				vertical-align: bottom;
			}
			
		</style>
	</head>
	<body>
		<!-- 需求结构：4个p段落，嵌套文字（行内元素）：图片叫什么名字
		                       文字后加img，设置宽高：25~100px       
								每个图片后面加：基线对齐、顶端对齐
								              居中对齐、底部对齐
											  
		-->
		<h1>文本与图片垂直属性</h1>
		<p>紫悦<img class="baseline" src="img/1.png" alt="紫悦" width="100" height="100">基线对齐</p>
		<p>碧琪<img class="top" src="img/2.png" alt="碧琪" width="100" height="100">顶端对齐</p>
		<p>珍奇<img class="middle" src="img/3.png" alt="珍奇" width="100" height="100">居中对齐</p>
		<p>兔子<img class="bottom" src="img/4.png" alt="兔子" width="100" height="100">底部对齐</p>
		<!-- css选择器--抓第一张图片....
		思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		错误原因：html结构不符合派生特点：p包含4个img
		         伪类选择器，4个img需要在一个p中
		p img:nth-child(1)
		
		 -->
		
		
	</body>
</html>